<template>
  <div class="container" :class="{show:visible}">
    <div class="mask"></div>
    <div class="wrap">
      <div class="content">
        <div class="close right" @click="close"></div>
        <div class="logo">
          <img src="../assets/img/login_logo.png" alt="易找标">
        </div>
        <div class="text">捕获专属你的商机</div>

        <form class="form-wrap" id="login-form">
          <div class="top">
            <span class="title">登录</span>
            <router-link class="link-register" :to="{name:'register'}" target="_blank">注册</router-link>
          </div>
          <div class="input-wrap input-username" :class="{'format-error':inputUserNameError}">
            <i class="icon icon-user"></i>
            <input type="text"
                   name="username"
                   v-model="inputUserName"
                   @keyup.enter="login"
                   placeholder="请输入手机号">
            <span class="format-error-sign">手机号码格式不正确</span>
          </div>
          <div :class="{'format-error':inputPasswordError}" class="input-wrap input-password">
            <i class="icon icon-password"></i>
            <input type="password"
                   name="password"
                   v-model="inputPassword"
                   placeholder="请输入密码"
                   @keyup.enter="login"
            >
            <span class="format-error-sign">密码不能为空</span>
          </div>
          <div class="options">
                        <span class="remember-password" :class="{active:rememberActive}" @click="rememberPassword">
<!--                            <i class="el-icon-check" style="color: #ffffff;font-size: 14px;"></i>-->
                        </span>
            <nuxt-link :to="{name:'get-password'}" class="forget-password" target="_blank">忘记密码？</nuxt-link>
          </div>
          <div class="btn-login" @click="login">
            登录
          </div>
          <div class="error-password" v-show="passwordError">账号或密码错误</div>
        </form>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      msg: 'loginDialog',
      rememberActive: true,
      inputUserName: '',
      inputUserNameError: false,
      passwordError: false,
      inputPassword: '',
      inputPasswordError: false,
    }
  },
  props: {
    visible: Boolean
  },
  watch: {
    inputUserName(val) {
      console.log(val);
      this.inputUserNameError = !this.utils.testPhoneNumber(val);
    },
    inputPassword(val) {
      this.inputPasswordError = val === '';
    }
  },
  methods: {
    close() {
      if (!this.$route.meta.allowNotLogin) {
        this.$router.push({
          name: 'index'
        })
      }
      this.$store.commit('changeLoginDialogShow', false);
    },
    rememberPassword() {
      this.rememberActive = !this.rememberActive;
    },
    login() {
      // eslint-disable-next-line no-unused-vars
      let pass = true;

      if (!this.utils.testPhoneNumber(this.inputUserName)) {
        pass = false;
        this.inputUserNameError = true;
      }
      if (this.inputPassword.trim() === '') {
        pass = false;
        this.inputPasswordError = true;
      }
      if (pass) {
        let loading = this.$loading({
          lock: true,
          text: '请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)'
        });
        this.$request.login({
          username: this.inputUserName,
          password: this.inputPassword
        }).then((res) => {
          console.log("------------",res);
          loading.close();
          if (res.status == 200) {
            this.passwordError = false;
            if (this.rememberActive) {
              sessionStorage.removeItem('token');
              // console.log("------------",res.data);
              localStorage.setItem('token', res.data);
            } else {
              localStorage.removeItem('token');
              sessionStorage.setItem('token', res.data);
            }
            window.location.reload();   //刷新页面

          } else if (res.status == 500) {
            this.passwordError = true;
          } else {
            this.requestError(res.status, res.message)
          }
        }, (err) => {
          console.log(err)
          loading.close();
          this.requestFail(err);
        })
      }

    }
  }
}
</script>

<style scoped lang="less">
.container {
  display: none;
  .min-width(1200px);

  &.show {
    display: block;
  }

  .over-screen(fixed);
  z-index: 997;

  .mask {
    .over-screen(absolute, 70);
  }

  .wrap {
    .size(1200px);
    .center(auto-x);
    position: relative;

    .content {
      .size(1223px, 570px);
      .bg('@{img-base-url}login_bg.png', no-repeat, left bottom, 1168px 540px);
      .opacity(100);
      .center(known-y, 566px);
      right: 0;

      .close {
        .size(36px, 36px);
        /*background: url("../assets/img/login_icon-close.png");*/
        .bg("@{img-base-url}login_icon-close.png");
      }

      .logo {
        .size(225px, 56px);
        position: absolute;
        top: 191px;
        left: 174px;

        img {
          .size
        }
      }

      .text {
        .fz(40px);
        position: absolute;
        top: 290px;
        left: 174px;
        .color(#ffffff);
        letter-spacing: 6px;
        font-weight: lighter;
      }

      .form-wrap {
        .size(549px, 487px);
        /*background: url("../assets/img/login_bg-2.png");*/
        .bg("@{img-base-url}login_bg-2.png");
        /*background-size: 100%;*/
        position: absolute;
        top: 65px;
        right: 93px;

        .top {
          margin-top: 38px;
          padding: 0 42px 0 120px;
          .clearfix;

          .title {
            .fz(30px);
            .color(#F68119);
            .fl;
            font-weight: bold;
          }

          .link-register {
            .fz(16px, 30px);
            .color(#999999);
            .fr;
            margin-right: 20px;
          }
        }

        .input-wrap {
          .size(400px, 56px);
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(235, 235, 235, 1);
          box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12);
          border-radius: 8px;
          margin-left: 102px;
          margin-top: 39px;
          padding-left: 30px;
          position: relative;

          & i {
            display: inline-block;
            .size(20px);
            /*background: url("../assets/img/login_icon-user.png");*/
            vertical-align: middle;
            margin-right: 12px;

            &.icon-user {
              .bg("@{img-base-url}login_icon-user.png");
            }

            &.icon-password {
              .bg("@{img-base-url}login_icon-password.png");
            }
          }

          input {
            .size(328px);
            line-height: 56px;
            vertical-align: middle;
            border: none;
            padding: 0;
            outline: none;
            background-color: #ffffff;
            .fz(18px);
            .beauty-placeholder(custom, color, #A9A9A9);
            //.box-shadow(0,0,0,1000px,white);
          }

          .format-error-sign {
            position: absolute;
            top: 60px;
            left: 0;
            .color(@color-error);
            .fz(14px);
            padding-left: 10px;
          }

          &.format-error {
            .format-error-sign {
              display: inline;
            }
          }
        }

        .options {
          padding-left: 102px;
          margin-top: 30px;
          .color(#7CB1E8);
          font-size: 16px;
          font-weight: 400;

          .remember-password {
            display: inline-block;
            .size(16px, 16px);
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(200, 200, 200, 1);
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
            .border-radius(2px);
            position: relative;
            cursor: pointer;

            &:after {
              display: inline-block;
              .size(64px, 16px);
              content: '记住账号';
              /*white-space: nowrap;*/
              /*margin-left: 26px;
              margin-top: -10px;*/
              position: absolute;
              top: -1px;
              left: 26px;
            }

            &.active {
              .bg("@{img-base-url}login_icon-duigou.png");
            }
          }

          .forget-password {
            .fr;
            margin-right: 38px;
            cursor: pointer;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .btn-login {
          .size(370px, 55px);
          background: linear-gradient(180deg, @main-color, #F8A333);
          box-shadow: 0 1px 7px 0 rgba(246, 131, 26, 0.51);
          .border-radius(28px);
          .center(text-x);
          margin-left: 124px;
          margin-top: 31px;
          cursor: pointer;
          .fz(18px, 55px);
          .color(#FFFFFF);
        }

        .error-password {
          .size(370px, 50px);
          .color(@color-error);
          .center(text-x);
          margin-left: 124px;
          .fz(16px, 55px);
        }
      }
    }
  }
}
</style>
